import './AppletView.less'
import { Carousel, Tooltip, Typography } from 'antd'
import React from 'react'
import { useModel } from '@umijs/max'
import { useEffect, useState } from 'react'
import bannerEmpty from '@/assets/images/banner_empty.png'
import navItem from '@/assets/images/nav_item.png'

const AppletView = ({}) => {
  const { shopUpdateData, shopData, currentSelectCom, setCurrentSelectCom } = useModel('ShopDecoration')
  const [newData, setNewData] = useState({})

  useEffect(() => {
    setNewData(shopData)
  }, [shopData])

  useEffect(() => {
    const tempData = {
      ...newData,
      ...shopUpdateData
    }

    setNewData(tempData)
  }, [shopUpdateData])

  // 选择组件
  const handleSelectCom = type => {
    setCurrentSelectCom(type)
  }

  return (
    <div className='applet_view'>
      {/* 状态 */}
      <div className='applet_view_status'></div>

      {/* 标题 */}
      <div className='applet_view_title'>
        <div className='applet_view_title_text'>店铺首页</div>
        <div className='applet_view_title_btn'></div>
      </div>

      {newData && (
        <div className='applet_view_content'>
          {/* <Typography>
            <pre>{JSON.stringify(newData.navigationArr, null, 2)}</pre>
          </Typography> */}

          {/* 九宫格 */}
          <Tooltip title='导航' open={true} defaultOpen placement='left'>
            <div
              className={`applet_view_content_grid ${currentSelectCom === 'navigationArr' ? 'active' : ''}`}
              onClick={() => handleSelectCom('navigationArr')}
            >
              {newData.navigationArr &&
              newData.navigationArr.length &&
              JSON.stringify(newData.navigationArr[0]) !== '{}' ? (
                <div className='applet_view_content_grid_wrapper'>
                  {newData.navigationArr.map((item, index) => {
                    return (
                      <div className='applet_view_content_grid_item' key={index}>
                        {item && JSON.stringify(item) !== '{}' && (
                          <>
                            <div className='applet_view_content_grid_item_image'>
                              <img src={item?.img_url ? item?.img_url : navItem} loading='lazy' />
                            </div>
                            <div className='applet_view_content_grid_item_text'>
                              {item?.content ? item?.content : '导航名称'}
                            </div>
                          </>
                        )}
                      </div>
                    )
                  })}
                </div>
              ) : (
                <div className='nav_no_data'>
                  <div className='applet_view_content_grid_wrapper'>
                    {[1, 2, 3, 4, 5].map((item, index) => {
                      return (
                        <div className='applet_view_content_grid_item' key={index}>
                          <div className='applet_view_content_grid_item_image'>
                            <img src={navItem} loading='lazy' />
                          </div>
                          <div className='applet_view_content_grid_item_text'>导航{index + 1}</div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              )}
            </div>
          </Tooltip>

          {/* 轮播图 */}
          <Tooltip title='Banner' open={true} defaultOpen placement='left'>
            <div
              className={`applet_view_content_carousel ${currentSelectCom === 'bannerArr' ? 'active' : ''}`}
              onClick={() => handleSelectCom('bannerArr')}
            >
              {newData.bannerArr && newData.bannerArr.length ? (
                <Carousel dotPosition={'bottom'}>
                  {newData.bannerArr.map((item, index) => {
                    return (
                      <img
                        key={index}
                        className='applet_view_content_carousel_img'
                        src={item?.img_url ? item?.img_url : bannerEmpty}
                        loading='lazy'
                      />
                    )
                  })}
                </Carousel>
              ) : (
                <div className='banner_no_data'>
                  <img src={bannerEmpty} alt='暂无数据' />
                </div>
              )}
            </div>
          </Tooltip>
        </div>
      )}
    </div>
  )
}
export default AppletView
